<template>
	<div class="tab">
		<div class="tab-item" :class="{active: activeTo===key}" @click="itemClick(item,key)" v-for="(item,key) in list">
			{{item.title}}
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue';

	defineProps({
		list: {
			type: Array,
			default: []
		}
	});
	const activeTo = ref(0);
	const emits = defineEmits(['itemClick']);
	//
	const itemClick = (item: any, key: number) => {
		activeTo.value = key;
		emits('itemClick', item, key);
	}
</script>

<style scoped lang="scss">
	.tab {
		display: flex;
		align-items: center;
		&-item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 14px;
			color: rgba(0, 0, 0, .65);
			cursor: pointer;
			padding: 0 8px;
			transition: 0.2s;
		}

		&-item:hover {
			opacity: 0.75;
		}
		&-item.active{
			color: #5283ff;
		}
	}
</style>